<template>
  <div class="box">
    <div
      id="container"
      style="width: 750px; height: 90vh; margin-bottom: 4.1875rem"
    ></div>
    <van-popup v-model:show="isShowAcc" closeable>
      <div class="accBox">
        <div class="title">
          <span>提示</span>
        </div>
        <div class="content">{{ bridgeName }}发生船碰桥事故,请您立即处理</div>
        <div class="btn" @click="goToAccDetail">查看详情</div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, defineEmits, defineProps, watch } from "vue";
import {
  getwaterwayBridgeDistribution,
  getAccidentBaseInfo,
} from "../utils/apis";

import { useRouter } from "vue-router";
const router = useRouter();
const isShowAcc = ref(false);
const goToAccDetail = () => {
  // 跳转到事故详情
  router.push({
    path: "/accidentInformation",
    query: { id: accId.value, lat: lat.value, lon: lon.value },
  });
};
// 桥梁数据
let bridgeDataList = ref([]);
// 桥梁位置
const positionList = ref([]);
// 发生事故的桥梁位置
const positionAcc = ref([]);
// 事故id
const accId = ref("");
// 事故经纬度
const lat = ref("");
const lon = ref("");
const data = ref({
  code: "440000",
});
let bridgeId = ref("");
let bridgeName = ref("");
// 默认展示广东省的桥梁
const getwaterwayBridgeDistributionFn = () => {
  getwaterwayBridgeDistribution({ data }).then((res) => {
    if (res.code == 200) {
      let dataList = res.data;
      dataList.map((el) => {
        if (
          (el.latitude != "" &&
            el.latitude != undefined &&
            el.latitude != null) ||
          (el.longitude != "" &&
            el.longitude != undefined &&
            el.longitude != null)
        ) {
          let positionItem = {
            position: [el.longitude, el.latitude],
            bridgeid: el.bridgeid,
          };
          positionList.value.push(positionItem);
        }
      });
      return positionList.value;
    }
  });
};
const getAccidentBaseInfoFn = () => {
  getAccidentBaseInfo().then((res) => {
    if (res.code == 200) {
      let dataList = res.data;
      dataList.map((el) => {
        if (
          (el.latitude != "" &&
            el.latitude != undefined &&
            el.latitude != null) ||
          (el.longitude != "" &&
            el.longitude != undefined &&
            el.longitude != null)
        ) {
          let positionItem = {
            position: [el.longitude, el.latitude],
            id: el.id,
            bridgeName: el.bridgeName,
          };
          lat.value = el.latitude;
          lon.value = el.longitude;
          positionAcc.value.push(positionItem);
        }
      });
      return positionAcc.value;
    }
  });
};

watch(
  bridgeDataList,
  (newval, oldval) => {
    console.log(newval, oldval);
  },
  { deep: true, immediate: true }
);
const emit = defineEmits(["showBridgeBox"]);
const showBridgeBox = (val) => {
  emit("showBridgeBox", val);
};
getwaterwayBridgeDistributionFn();
getAccidentBaseInfoFn();
onMounted(() => {
  getwaterwayBridgeDistributionFn();
  getAccidentBaseInfoFn();
  setTimeout(() => {
    init();
  }, 500);
});

const init = () => {
  var map = new AMap.Map("container", {
    resizeEnable: true,
    center: [113.397428, 22.90923],
    zoom: 8,
    viewMode: "3D", //使用3D视图
  });
  map.clearMap(); // 清除地图覆盖物
  // 桥梁的图标
  var startIcon = new AMap.Icon({
    // 图标尺寸
    size: new AMap.Size(40, 50),
    // 图标的取图地址
    // image: require('../static/images/bridge.png'),无效
    image: new URL("../static/images/bridge.png", import.meta.url).href,
    // 图标所用图片大小
    imageSize: new AMap.Size(40, 50),
    // 图标取图偏移量
    imageOffset: new AMap.Pixel(0, 0),
  });
  // 事故点的图标
  var AccIcon = new AMap.Icon({
    // 图标尺寸
    size: new AMap.Size(40, 50),
    // 图标的取图地址
    image: new URL("../static/images/accidentInformation.png", import.meta.url)
      .href,
    // 图标所用图片大小
    imageSize: new AMap.Size(43, 43),
    // 图标取图偏移量
    imageOffset: new AMap.Pixel(0, 0),
  });
  var markers = [];
  // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
  for (let i = 0, marker; i < positionList.value.length; i++) {
    let marker = new AMap.Marker({
      map: map,
      icon: startIcon,
      position: positionList.value[i].position,
      offset: new AMap.Pixel(-13, -30),
      extData: { bridgeId: positionList.value[i].bridgeid },
    });
    map.add(marker); //添加到地图
    marker.on("click", function (e) {
      // 拿到对应的桥梁id,并传给父组件
      bridgeId.value = marker.getExtData();
      emit("showBridgeBox", bridgeId.value);
    });
  }
  for (let j = 0; j < positionAcc.value.length; j++) {
    let markeracc = new AMap.Marker({
      map: map,
      icon: AccIcon,
      position: positionAcc.value[j].position,
      offset: new AMap.Pixel(-13, -30),
      extData: {
        name: positionAcc.value[j].bridgeName,
        id: positionAcc.value[j].id,
      },
    });
    map.add(markeracc); //添加到地图
    // 事故点的点击事件
    markeracc.on("click", function (e) {
      accId.value = markeracc.getExtData().id;
      bridgeName.value = markeracc.getExtData().name;
      console.log(169, bridgeName.value);
      setTimeout(() => {
        isShowAcc.value = true;
      }, 500);
    });
  }

  AMap.plugin(["AMap.ToolBar"], function () {
    // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
    map.addControl(
      new AMap.ToolBar({
        // 简易缩放模式，默认为 false
        liteStyle: true,
        position: "LB",
      })
    );
  });
};
</script>

<style lang="scss" scoped>
.amap-icon {
  overflow: inherit !important;
}
.accBox {
  width: 321px;
  height: 161px;
  background: #ffffff;
  box-shadow: 2px 4px 16px 2px rgba(47, 114, 191, 0.35);
  border-radius: 4px 4px 4px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .title {
    margin-top: 16px;
    margin-bottom: 8px;
    font-size: 20px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: row;
  }
  .content {
    font-size: 16px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
  }
  .btn {
    margin-bottom: 16px;
    margin-top: 33px;
    width: 105px;
    height: 40px;
    background: #266fe8;
    border-radius: 4px 4px 4px 4px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }
}
:deep(.van-popup--center) {
  border-radius: 6px;
}
</style>

